<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--
           {{}}、 v-html和v-text：都是控制标签的内容的
        -->
        <!-- 
            {{}}和v-text（v-html）的区别：
            1、v-text会替换标签的所有内容。而{{}}可以灵活控制标签内容的部分。
            2、在网速慢的情况下，在页面渲染时，{{}}会有闪动 【即：先展示出{{}}，再展示数据】。而v-text没有问题。
         -->

        <!-- <p v-text="msg"></p> -->
        <!-- <p >{{age}}</p> -->
        <!-- <p v-text="age"></p> -->

         <!-- v-html和v-text的区别：
            1、v-html就相当于innerHTML的效果：把字符串当作html标签做解析。v-html不会对内容做转义
            2、v-text就相当于innerText的效果：把字符串原样输出。v-text会对内容做转义。        
        -->
         <p v-html="age"></p>
         <p v-text="age"></p>
         <hr/>
         <p v-html="str"></p>
         <p v-text="str"></p>
    </div>
</body>

</html>
<script src="./js/vue2.js"></script>
<script>

    let vm = new Vue({
        el:"#app",
        data:{
            msg:"hello",
            age:18,
            str:"<b>内容</b>"
        }
    });


</script>